<!-- windows -->
<template>
  <div
    class="box"
    v-if="display"
    :class="{ active: isActive }"
    :style="{ height: `${height}px`, width: `${width}px` }"
    v-size
  >
    <div class="top" v-drag v-dblbig>
      <span>{{ title }}</span>
      <div class="icon">
        <div class="img mini" @click="handleMiniBox(title)"></div>
        <div class="img big" v-big></div>
        <div class="img close" @click="handleCloseBox(title)"></div>
      </div>
    </div>
    <div class="content">
      <slot></slot>
      <!-- <div class="content-slogan">和梦想平等交易，与喧嚣保持距离</div> -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bus from "../assets/js/eventBus";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "windows",
  components: {},
  data() {
    return {
      display: false,
      isActive: false,
    };
  },
  props: {
    title: {
      type: String,
      require: true,
    },
    width: {
      type: Number,
      default: window.innerWidth ,
    },
    height: {
      type: Number,
      default:  window.innerHeight - 44 ,
    },
  },
  methods: {
    handleMiniBox(title) {
      this.display = false;
      let msg = {
        title,
      };
      bus.$emit("taskbarMini", msg);
    },
    handleCloseBox(title) {
      this.display = false;
      bus.$emit("taskbarDisplay", title);
    },
  },
  beforeDestroy () {
        bus.$off("displayChang");
  },
  mounted() {
    bus.$on("displayChang", (msg) => {
      if (msg.title === this.title) {
        if (!msg.isdisplay) {
          this.isActive = msg.isActive;
          this.display = msg.display;
        } else {
          console.log(this.isActive);
          if (!this.isActive) {
            this.isActive = true;
            this.display = true;
          } else {
            this.isActive = false;
            this.display = false;
          }
        }
      } else {
        this.isActive = false;
      }
    });
  },
};
</script>
<style scoped>
.box {
  /* width: 800px;
  height: 600px; */
  background-color: #ffffff;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 2000;
}

.box .top {
  width: 100%;
  height: 40px;
  background-color: #0064b1d1;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: space-between;
}

.box .top span {
  margin-left: 20px;
  user-select: none;
}

.box .top .icon .img {
  /* margin-left: 10px; */
  width: 40px;
  height: 40px;
  float: left;
}

.box .top .icon .img:hover {
  background-color: #267abd;
}

.renovate {
  background: url("../../static/image/Refresh.svg") no-repeat center;
  background-size: 20px 20px;
}

.mini {
  background: url("../../static/image/mini.svg") no-repeat center;
  background-size: 20px 20px;
}

.big {
  background: url("../../static/image/Full_screen.svg") no-repeat center;
  background-size: 20px 20px;
}

.close {
  background: url("../../static/image/close.svg") no-repeat center;
  background-size: 20px 20px;
}

.box .top .icon .close:hover {
  background-color: #ff0000;
}
.active {
  z-index: 4001;
}
.content {
  height: calc(100% - 40px);
  border-left: 1px solid #707070;
  border-right: 1px solid #707070;
  border-bottom: 1px solid #707070;
}
.content-slogan{
  position: relative;
}
</style>
